<template>
  <fieldset>
    <legend>购物车</legend>
    <h1>{{ $store.state.Cart.tag }}</h1>
    <ul>
      <li v-for="item in carts" :key="item.id">
        <span>产品名称：</span>
        <b>{{ item.title }}</b>
        &nbsp;&nbsp;&nbsp;
        <span>产品单价：</span>
        <b>{{ item.price }}</b>
        &nbsp;&nbsp;&nbsp;
        <span>库存：</span>
        <b>{{ item.count }}</b>
      </li>
    </ul>
    <h1 :style="{textAlign:'right'}">
      总价格：
      <span :style="{color:'green'}">{{total}}</span>
    </h1>
  </fieldset>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  computed: {
    ...mapState("Cart", ["tag", "carts"]),
    ...mapGetters("Cart", ["total"]),
  },
};
</script>

<style>
</style>